<%@page import="com.alter.utils.encode.JsonBinder"%>
<%@page import="com.alter.utils.ApplicationContextUtil"%>
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@taglib prefix="ui" tagdir="/WEB-INF/tags/UI"%>
<%@taglib prefix="p" tagdir="/WEB-INF/tags/UI/panel"%>
<%@taglib prefix="msg" tagdir="/WEB-INF/tags/common/message"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<ui:baseHeader title="文章管理中心"></ui:baseHeader>
</head>
<body>
	<ui:navigation index="4" />
	<div class="container">
		<div class="row">
			<div class="span12">
				<div class="tabbable tabs-left">
					<ul class="nav nav-tabs nav-stacked">
						<li class="active"><a href="#1001" data-toggle="tab"> 导航管理</a></li>
						<li><a href="#1002" data-toggle="tab"> 导航管理 2</a></li>
					</ul>
					<div class="tab-content">
						<div id="1001" class="tab-pane active">
							<div style="float: left; width: 500px;">
								<table class="subnav">
									<tr>
										<td>菜单</td>
										<td style="text-align: right; padding-right: 5px"><a href="javascript:expandAll(true)">展开全部</a> <span class='divider'>/</span> <a
											href="javascript:expandAll(false)">关闭全部</a></td>
									</tr>
								</table>
								<ul id="tree" class="ztree">
								</ul>
							</div>
							<div style="float: left; width: 531px; padding-left: 20px; display: inline;">
								<table class="subnav">
									<tr>
										<td>更新导航</td>
									</tr>
								</table>
								<div>
									<ul id="nodeSubNav" class="breadcrumb" style="margin-top: 9px">
										<li>导航路径: <a href="javascript:gotoNode()" class='noactive'>所有</a></li>
									</ul>
									<form class="well form-horizontal" id="nodeForm">
										<input type="hidden" name="aid" />
										<div class="control-group">
											<label class="control-label">名称</label>
											<div class="controls">
												<input name="name" type="text" />
												<p class="help-block">长度在0~10, 只允许包含字母，数字，汉字。</p>
											</div>
										</div>
										<div class="control-group">
											<label class="control-label">路径</label>
											<div class="controls">
												<input name="href" type="text" />
												<p class="help-block">长度在0~50, 只允许包含字母 数字 下划线 '/'，必须已'/'开头。</p>
											</div>
										</div>
										<div class="control-group">
											<label class="control-label">TIPS</label>
											<div class="controls">
												<input name="desc" type="text" />
											</div>
										</div>
										<div class="control-group">
											<label class="control-label">优先级</label>
											<div class="controls">
												<input name="priority" type="text" />
											</div>
										</div>
										<div class="control-group">
											<label class="control-label">激活</label>
											<div class="controls">
												<input name="isEnabled" type="checkbox" />
											</div>
										</div>
										<div class="form-actions">
											<a class="btn btn-primary" href="javascript:addNode()" id="nodeAdd"> <i class="icon-pencil"></i> 新增
											</a> <a class="btn" href="#" id="nodeUpdate"> <i class="icon-refresh"></i> 更新
											</a> <a class="btn btn-danger hide" href="#" id="nodeDelete"> <i class="icon-remove"></i>删除
											</a> <a class="btn" href="javascript:nodeCancel()" id="nodeCancel" style="display: none"> <i class="icon-share-alt"></i> 取消
											</a>
										</div>
									</form>
								</div>
							</div>
						</div>
						<div id="1002" class="tab-pane">这个是第二个</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<p:ajaxerror />
	<ui:baseFooter />
	<script type="text/javascript">
		var tree = null;

		$(document).ready(function() {
			var treeNode = <%=JsonBinder.jsonExtendConllection(request
					.getAttribute("navtree"))%>;
			initpIdData(null,treeNode);
			var setting = {
							data:{
									key:{children:'childBar'},
									simpleData:{
										enable:true,
										idKey:'aid',
										pIdKey:'pId',
										rootPId:0
									} 
								 },
							view:{
								expandSpeed:"",
								addDiyDom: addDiyDom,
								selectedMulti:false
							},
							callback:{
								onClick:nodeClickHandler
							}
						  };				
			tree = $.fn.zTree.init($("#tree"),setting,treeNode);
			// event
			$("#nodeUpdate").click(updateNode);
			$("#nodeDelete").click(deleteNode);
			//激活对话框
			$('#ajaxmodal').modal({show:false});
			// 全局注册ajax 失败处理 
			$("body").ajaxError(function(){
				$('#ajaxmodal').modal('show');
			});
		});

		/*展开和折叠*/
		function expandAll(bl){
			tree.expandAll(bl);
		}
		
		/*初始化zTree pId信息*/
		function initpIdData(p,nodearr){
			for ( var index in nodearr) {
				var parent = nodearr[index];
				if(p == null){
					parent.pId = 0;
					//parent.isParent = true;
				}else{
					parent.pId = p.aid;
				}
				
				if(parent.childBar != null && parent.childBar.lenght != 0){
					initpIdData(parent, parent.childBar);
				}
			}
		}

		/*自定义行显示信息*/
		function addDiyDom(treeId, treeNode){
			var aObj = $("#" + treeNode.tId + "_a");
			aObj.find(".nodepriority").remove();
			// 先清空所有的HTML 再添加
			aObj.append("<span class='nodepriority'>(优先级："+treeNode.priority+")</span>");
			// 设定节点未激活样式。
			if(treeNode.isEnabled == null || !treeNode.isEnabled){
				aObj.addClass("ztree_disabled_node");
			}else{
				aObj.removeClass("ztree_disabled_node");
			}
		}

		/*node 点击处理 */
		function nodeClickHandler(event, treeId, treeNode) {
			updateNodeInfo(treeNode);
			updateNodeSubNav(treeNode);
		}
		
		/*更新NODE 子导航 */	
		function updateNodeSubNav(json){
			var data = [json];
			initSubNavData(data,json);
			var html = "<li>导航路径: <a href='javascript:gotoNode()' class='noactive'>所有</span></a>";
			if (json != null) {
				html += "<span class='divider'>/</span>";
			}
			html += "</li>";
			if(json != null){
				for ( var index in data) {
					var node = data[index];
					var active = false;
					if (node.aid == json.aid) {
						active = true;
					}
					html += "<li";
					if (!active) {
						html += " class='noactive'> <a href=\"javascript:gotoNode('"+node.tId+"')\">" + node.name +"</a>";
						html += "<span class='divider'>/</span>";
					}else{
						html += " class='active'>" + node.name;
					}
					html += "</li>";
				}
			}
			$("#nodeSubNav").html(html);
		}

		/*
		 * 向上查找 该节点路径
		 */
		function initSubNavData(data,node){
			if(node != null){
				var parentNode = node.getParentNode();
				if(parentNode != null){
					data.unshift(parentNode);
					initSubNavData(data,parentNode);
				}
			}
		}

		/*根據數據信息更新 表單 */
		function updateNodeInfo(json) {
			if (json != null) {
				var name = json.name;
				var path = json.href;
				var priority = json.priority;
				var enabled = json.isEnabled;
				var desc = json.desc;
				var id = json.aid;
				$("#nodeForm input[name='aid']").val(id);
				$("#nodeForm input[name='name']").val(name);
				$("#nodeForm input[name='href']").val(path);
				$("#nodeForm input[name='priority']").val(priority);
				$("#nodeForm input[name='desc']").val(desc);
				$("#nodeForm input[name='isEnabled']").attr("checked", enabled);
			}else{
				$("#nodeForm").get(0).reset();
			}
			// 表单BUTTON 状态
			if(json != null && !json.isParent){
				$("#nodeDelete").show();
			}else{
				$("#nodeDelete").hide();
			}
			$("#nodeCancel").hide();
			$("#nodeUpdate").show();
		}

		/*更新NODE信息*/
		function updateNode() {
			if(tree.getSelectedNodes().length == 1){
				$.ajax({
					url:"<%=request.getContextPath()%>/manage/updnode",
					type:"post",
					data:$("#nodeForm").serialize(),
					success:function(data){
						var $curnode = tree.getSelectedNodes()[0];
						$curnode.name = data.name;
						$curnode.desc = data.desc;
						$curnode.isEnabled = data.isEnabled == null?false:data.isEnabled;
						$curnode.href = data.href;
						tree.updateNode($curnode);
					}
				});
			}
		}

		/*新增節點信息*/
		function addNode() {
			if ($("#nodeCancel").css("display") == 'none') {
				$("#nodeCancel").show();
				$("#nodeUpdate").hide();
				$("#nodeDelete").hide();
				$("#nodeForm input[type='text']").val(null);
				$("#nodeForm input[type='hidden']").val(null);
				$("#nodeForm input[name='isEnabled']").attr("checked", false);
			} else {
				//submit
				var $curnode = null;
				var param = $("#nodeForm").serialize();
				if(tree.getSelectedNodes().length == 1){
					$curnode = tree.getSelectedNodes()[0];
					param += '&parentBar.aid='+$curnode.aid;
				}

				$.ajax({
					url:"<%=request.getContextPath() + "/manage/addnode"%>",
					type:"post",
					data:param,
					success:function(data){
						tree.addNodes($curnode,data);
						nodeCancel();
					}
				});
			}
		}

		/*删除节点*/
		function deleteNode(){
			if(tree.getSelectedNodes().length == 1){
				var $curnode = tree.getSelectedNodes()[0];
				if(confirm("确定要删除导航 "+$curnode.name+" ?")){
					$.ajax({
						url:"<%=request.getContextPath() + "/manage/delnode"%>",
								type : "post",
								data : $("#nodeForm").serialize(),
								success : function(data) {
									var _pNode = $curnode.getParentNode();
									tree.removeNode($curnode);
									$("#nodeDelete").hide();
									tree.selectNode(_pNode);
									nodeClickHandler(null, null, _pNode);
								}
							});
				}
			}
		}

		/*取消新增狀態*/
		function nodeCancel() {
			updateNodeInfo(tree.getSelectedNodes()[0]);
		}

		function gotoNode(tid) {
			if (tid == null) {
				tree.cancelSelectedNode();
				nodeClickHandler(null, null, null);
			} else {
				var node = tree.getNodeByTId(tid);
				nodeClickHandler(null, null, node);
				tree.selectNode(node);
			}
		}
	</script>
</body>
</html>
